<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>分析生命周期</title>
    <script type="text/javascript" src="./../vue.js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h2>当前的n值是: {{n}}</h2>
      <button @click="add">点我n+1</button>
      <button @click="bye">点我销毁vm</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      new Vue({
        el: "#root",
        data: {
          n: 1,
        },
        methods: {
          add() {
            this.n++;
            console.log("add");
          },
          bye() {
            this.$destroy();
            console.log("bye");
          },
        },
        watch: {
          n(val) {
            console.log("n变了", val);
          },
        },

        beforeUpdate() {
          console.log("beforeUpdate");
        },
        updated() {
          console.log("updated");
        },


        // 此时：vm中所有的：data、methods、指令等等，
        // 都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等，收尾操作。
        beforeDestroy() {
          console.log("beforeDestroy");
          console.log(this.n);
          this.add()
          console.log(this.n);
          // debugger;
        },

        destroyed() {
          console.log("destroyed");
        },
      });
    </script>
  </body>
</html>
